<template>
  <div>
    <HeaderTitle title="保险方案" />
    <div class="InsuranceScheme">
      <s-table
        size="default"
        ref="table"
        rowKey="id"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :columns="columns"
        :data="loadData"
        defaultSort="createTime"
        :scroll="{x:980}"
      >
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a @click="handleEdit(record)">编辑</a>
        </span>
      </s-table>

    </div>
    <div class="footer">
      <a-button
        type="primary"
        @click="add"
        class="addButton"
      >新建</a-button>
      <a-button
        type="primary"
        @click="delect"
        class="delectButton"
        :disabled="selectedRowKeys.length<=0"
      >删除</a-button>
    </div>
    <Modal
      ref="modal"
      @ok="handleOk"
    />
  </div>
</template>
<script>
import HeaderTitle from '../header.vue'
import Modal from '../Modal.vue'
import { STable } from '@/components'
import { getSysInsuranceSchemeConfigList, delSysInsuranceSchemeConfig } from '@/api/system'
export default {
  name: 'InsuranceScheme',
  data () {
    return {
      columns: [
        {
          title: '方案名称',
          width: 100,
          dataIndex: 'schemeName'
        },
        {
          title: '高端品牌',
          width: 200,
          dataIndex: 'highInsurancePremium',
          customRender: (text, record) => `保费： ${text}元  `
        },
        {
          title: '中端品牌',
          width: 200,
          dataIndex: 'middleInsurancePremium',
          customRender: (text, record) => `保费： ${text}元  `
        },
        {
          title: '低端品牌',
          width: 200,
          dataIndex: 'lowInsurancePremium',
          customRender: (text, record) => `保费： ${text}元  `
        },
        {
          title: '最大赔偿次数',
          width: 200,
          dataIndex: 'maxPeichangNum'
        }, {
          title: '操作',
          width: 80,
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getSysInsuranceSchemeConfigList(Object.assign(parameter, {}))
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    add () {
      this.$refs.modal.add()
      console.log('我点击了新建')
    },
    handleEdit (record) {
      this.$refs.modal.edit(record)
    },
    delect () {
      console.log('我点击了删除')
      delSysInsuranceSchemeConfig({ ids: this.selectedRowKeys.join(',') }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.handleOk()
        } else {
          this.$message.error(res.msg)
        }
        this.selectedRowKeys = []
      })
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    handleOk () {
      this.$refs.table.refresh(true)
      console.log('handleSaveOk')
    }
  },
  components: {
    HeaderTitle,
    STable,
    Modal
  }
}
</script>
<style  scoped>
.InsuranceScheme {
  box-sizing: border-box;
  padding: 16px 30px;
}
.footer {
  text-align: center;
  padding-bottom: 20px;
}
.delectButton {
  margin-left: 30px;
}
</style>
